<template>
  <div class="contents">
    <PanelTitle title="GAP追溯" />

    <div style="text-align: center; height: 30vh;">
      <!-- <img src="@/assets/phonefrrame.png" alt="" class="mt pics" /> -->
      <img v-if="codeUrl" :src="codeUrl" style="max-width: 100%; max-height: 100%;" />
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import PanelTitle from "../../component/PanelTitle.vue";
import http from "@/api/http";
import { env } from "@/utils/env";

const props = defineProps(["curPackId"]);
const codeUrl = ref('')

const getPageData = async () => {
  // let res = await http({
  //   url: env.VITE_ZHER_DATA_CENTER + "/base/trace/" + props.curPackId,
  //   method: "get",
  // });

  // if(!res.data){
  //   codeUrl.value = ''
  //   return
  // }
 
  let codeRes = await http({
    url: "/sanm-support/wechat/unlimited/qr/code",
    method: "post",
    data: {
        scene: props.curPackId + '_1',
        page: "produce/trace/trace",
        check_path: false,
        env_version: 'trial',
    }
  });
  
  codeUrl.value = 'data:image/png;base64,' + codeRes.data
};

  watch(
    () => props.curPackId,
    (newVal, oldVal) => {
     
      getPageData();
    }
  );

</script>

<style scoped lang="scss">
.contents {
  background: linear-gradient(
    to bottom,
    rgba(5, 79, 99),
    rgba(5, 79, 99, 0.1),
    rgba(5, 79, 99)
  );
  border-radius: vh(8);
  border: vh(1) solid rgba(6, 112, 180, 1);
  .mt {
    margin-top: vh(-40);
  }
}

.pics {
  width: vw(142);
  height: vh(289);
  margin: 0 auto;
}
</style>